<template>
  <div v-loading="loading" class="dashboard-editor-container">
    <!-- 动态公告 -->
    <div class="notice">
      <div class="item">
        <div>最新公告：</div>
        <div v-show="noticeoNe" class="list">1、{{ noticeoNe }}</div>
      </div>
      <div v-show="noticeTwo" class="item">
        <div class="list">2、{{ noticeTwo }}</div>
      </div>
      <div class="more">
        <router-link
          to="/notice/list"
        >查看更多<i
          class="el-icon-arrow-right"
        /></router-link>
      </div>
    </div>
    <!-- 订单统计信息 -->
    <panel-group :order-info="baseInfo" />
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
// import { homeInfo } from '@/api/user'
export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup
  },
  data() {
    return {
      loading: false,
      baseInfo: {},
      value: new Date(),
      periodText: '你好'
    }
  },
  computed: {
    noticeoNe() {
      return (
        this.baseInfo.claimInfoList &&
        this.baseInfo.claimInfoList[0] &&
        this.baseInfo.claimInfoList[0].content
      )
    },
    noticeTwo() {
      return (
        this.baseInfo.claimInfoList &&
        this.baseInfo.claimInfoList[1] &&
        this.baseInfo.claimInfoList[1].content
      )
    }
  },
  created() {
    // this.queryHomeInfo()
  },
  methods: {
    async queryHomeInfo() {
      this.loading = true
      try {
        // this.baseInfo = await homeInfo()
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // 去公告详情
    toNotice() {
      this.$router.push({
        path: 'notice/detail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.dashboard-editor-container {
  padding: 30px 15px 0 15px;
  .notice {
    position: relative;
    height: 60px;
    background-color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .list {
      width: 580px;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      // width: 100px;
      // cursor: pointer;
      // &:hover{
      // color: #ed145b!important;
      // }
    }
    .item {
      flex: 1;
      display: flex;
      position: relative;
    }
    .item:nth-child(1) {
      div:nth-child(1) {
        color: #df232f;
        font-size: 14px;
        margin-right: 15px;
        min-width: 70px;
      }
      div:nth-child(2) {
        color: #333333;
        font-size: 14px;
      }
    }
    .item:nth-child(2) {
      padding-left: 30px;
      padding-right: 30px;
      justify-content: space-between;
      div:nth-child(1) {
        color: #333333;
        font-size: 14px;
      }
      div:nth-child(2) {
        color: #999999;
        font-size: 14px;
      }
    }
    .item:nth-child(1):after {
      position: absolute;
      content: "";
      height: 24px;
      width: 1px;
      right: 0;
      top: -6px;
      background-color: #ebeef5;
    }
  }
  .title {
    color: #f57474;
    font-weight: bold;
  }
}
.el-card {
  border: none;
}
.more {
  position: absolute;
  right: 0;
  color: #999999;
  font-size: 14px;
  padding-right: 30px;
  // &:hover{
  // color: #ed145b!important;
  // }
}
</style>
